<template>
  <!-- 回收统计 -->
  <div class="tongji-box radius">
    <el-carousel height="300px">
      <el-carousel-item v-for="(item,i) in imgs" :key="i">
        <div class="carousel-item" :style="{backgroundImage:`url(${item.url})`}">
          <!-- <img :src="item.url" alt=""> -->
        </div>
        
      </el-carousel-item>
    </el-carousel>
    <div class="echart-box bgf radius">
      <div class="total-box flex fbt font16">
        <div class="total-item">
          <div class="title">进店人数</div>
          <div class="num">201</div>
        </div>
        <div class="total-item">
          <div class="title">咨询人数</div>
          <div class="num">201</div>
        </div>
        <div class="total-item">
          <div class="title">回复率</div>
          <div class="num">98%</div>
        </div>

      </div>
      <echartBar ref="echartBar"></echartBar>
    </div>
  </div>
</template>

<script>
import echartBar from "./echartBar.vue"
export default {
  name: "",
  components: {echartBar },
  data() {
    return {
     imgs:[
      {
        url:'../../../../assets/static/img/huishou/banner1.png'
      },
      {
        url:'../../../../assets/static/img/huishou/banner2.png'
      },
      {
        url:'../../../../assets/static/img/huishou/banner3.png'
      },
     ]
     
    };
  },
  created() {
  },
  mounted(){

  },
  methods: {
   
  },
};
</script>

<style scoped lang="scss">
.tongji-box{
  padding: 20px;
  background-color: #f8f8f8;
  .carousel-item{
    height: 300px;
    width: 100%;
    background-size: 100% 100%;
  }
  .echart-box{
    height: 400px;
    width: 100%;
    margin-top: 16px;
    padding: 20px 0;
    .total-box{
      width: 300px;
      margin: 0 auto;
      position: absolute;
      left: 0;
      right: 0;
      text-align: center;
      .num{
        color: $primary;
      }
    }
  }
}
</style>
